import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import {
    ResultPage,
    Card,
    Button,
    Popup,
    CalendarPickerView,
} from "antd-mobile";
import { LoopOutline } from "antd-mobile-icons";
import { useSelector, useDispatch } from "react-redux";
import { exChange, editDate } from "../../store/CitySlice";
import MySwiper from "../../components/MySwiper";
import dayjs from "dayjs";
import styles from "./index.module.css";

const Index = () => {
    const navigate = useNavigate();
    const { start, end, date } = useSelector((state) => state.CitySlice);
    const dispatch = useDispatch();
    const images = [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
        "https://img.yzcdn.cn/vant/apple-3.jpg",
        "https://img.yzcdn.cn/vant/apple-4.jpg",
        "https://img.yzcdn.cn/vant/apple-5.jpg",
        "https://img.yzcdn.cn/vant/apple-6.jpg",
        "https://img.yzcdn.cn/vant/apple-7.jpg",
        "https://img.yzcdn.cn/vant/apple-8.jpg",
    ];

    const [visible1, setVisible1] = useState(false);
    const [isSpeed, setIsSpeed] = useState(false);

    const handelCity = (type) => {
        navigate(`/city/${type}`);
    };

    const handelEx = () => {
        dispatch(exChange());
    };

    const handelQueryList = () => {
        navigate(`/list?isSpeed=${isSpeed}`);
    };

    return (
        <div>
            <ResultPage
                status=""
                title="火车票"
                description="便捷购票，服务您的每一次出行"
            >
                <Card style={{ marginTop: 12 }}>
                    <div className={styles.city_wrap}>
                        <span onClick={() => handelCity("start")}>{start}</span>
                        <LoopOutline fontSize={24} onClick={() => handelEx()} />
                        <span onClick={() => handelCity("end")}>{end}</span>
                    </div>
                    <div className={styles.date_wrap} onClick={() => setVisible1(true)}>
                        {date}
                    </div>
                    <Button
                        block
                        color="primary"
                        size="large"
                        shape="rounded"
                        onClick={() => handelQueryList()}
                    >
                        查询车票
                    </Button>
                </Card>
                {/* 调用轮播图组件 */}
                <MySwiper images={images}></MySwiper>
            </ResultPage>

            <Popup
                visible={visible1}
                onMaskClick={() => {
                    setVisible1(false);
                }}
                onClose={() => {
                    setVisible1(false);
                }}
            >
                <CalendarPickerView
                    min={dayjs()}
                    max={dayjs(dayjs().add(14, "day"))}
                    onChange={(val) => {
                        //调用仓库的action修改日期
                        dispatch(editDate({ date: dayjs(val).format("YYYY-MM-DD") }));
                        setVisible1(false);
                    }}
                />
            </Popup>
        </div>
    );
};

export default Index;
